<template>
	<view class="goodsDetailPage">
		<!-- 轮播 -->
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
					<view class="image-wrapper">
						<image
							:src="item.src" 
							class="loaded" 
							mode="aspectFill"
						></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="introduce-section">
			<text class="title">{{goodsInfo.name}}</text>
			<view class="price-box">
				<view class="goods-price">
					<text>{{goodsInfo.pruductIntegral}}</text> 
					<image class="goods-icon" mode="scaleToFill" src="/static/vMall/integralIcon.png"></image>
				</view>
				<view class="goods-sale">已售{{goodsInfo.sales}}</view>
			</view>
			<!-- <view class="bot-row">
				<text>销量: 108</text>
				<text>库存: 4690</text>
				<text>浏览量: 768</text>
			</view> -->
		</view>
		
		<!-- 规格-模态层弹窗 -->
		<view 
			class="popup spec" 
			:class="specClass"
			@touchmove.stop.prevent="stopPrevent"
			@click="toggleSpec"
		>
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image :src="productInfo.productImage" @click="previewProduct"></image>
					<view class="right">
						<view class="price product-price">
							<text>{{productInfo.sellPrice}}</text>
							<image class="goods-icon" mode="scaleToFill" src="/static/vMall/integralIcon.png"></image>
						</view>
						<view class="stock">销量：{{productInfo.sellNumber}}</view>
						<view class="selected">
							已选：
							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
								{{sItem.name}}
							</text>
						</view>
					</view>
				</view>
				<view v-for="(item,index) in specList" :key="index" class="attr-list">
					<text>{{item.name}}</text>
					<view class="item-list">
						<text 
							v-for="(childItem, childIndex) in specChildList" 
							v-if="childItem.pid === item.id"
							:key="childIndex" class="tit"
							:class="{selected: childItem.selected}"
							@click="selectSpec(childIndex, childItem.pid)"
						>
							{{childItem.name}}
						</text>
					</view>
				</view>
				<button class="btn" @click="specFinish">完成</button>
			</view>
		</view>
		
		<view class="detail-desc">
			<view class="d-header">
				<text>商品详情</text>
			</view>
			<rich-text :nodes="goodsInfo.detailFormat" preview></rich-text>
		</view>
		
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<view class="goods-price">
				<text>{{goodsInfo.pruductIntegral}}</text>	 
				<image class="goods-icon" mode="scaleToFill" src="/static/vMall/integralIcon.png"></image>
			</view>
			
			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border buy-now-btn" @click="exchange">立即兑换</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId: null,
				imgList: [],
				imgListDemo: [
					{
						src: 'https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg'
					},
					{
						src: 'https://gd3.alicdn.com/imgextra/i3/TB1RPFPPFXXXXcNXpXXXXXXXXXX_!!0-item_pic.jpg_400x400.jpg'
					},
					{
						src: 'https://gd2.alicdn.com/imgextra/i2/38832490/O1CN01IYq7gu1UGShvbEFnd_!!38832490.jpg_400x400.jpg'
					}
				],
				descDemo: `
					<div style="width:100%">
						<img style="width:100%;display:block;" src="https://gd3.alicdn.com/imgextra/i4/479184430/O1CN01nCpuLc1iaz4bcSN17_!!479184430.jpg_400x400.jpg" />
						<img style="width:100%;display:block;" src="https://gd2.alicdn.com/imgextra/i2/479184430/O1CN01gwbN931iaz4TzqzmG_!!479184430.jpg_400x400.jpg" />
						<img style="width:100%;display:block;" src="https://gd3.alicdn.com/imgextra/i3/479184430/O1CN018wVjQh1iaz4aupv1A_!!479184430.jpg_400x400.jpg" />
						<img style="width:100%;display:block;" src="https://gd4.alicdn.com/imgextra/i4/479184430/O1CN01tWg4Us1iaz4auqelt_!!479184430.jpg_400x400.jpg" />
						<img style="width:100%;display:block;" src="https://gd1.alicdn.com/imgextra/i1/479184430/O1CN01Tnm1rU1iaz4aVKcwP_!!479184430.jpg_400x400.jpg" />
					</div>
				`,
				userInfo: null,
				goodsInfo: {},
				productInfo: {},
				specClass: 'none',
				specSelected:[],
				favorite: true,
				shareList: [],
				specList: [],
				specChildList: [],
				specListDemo: [
					{
						id: 1,
						name: '尺寸',
					},
					{	
						id: 2,
						name: '颜色',
					},
				],
				specChildListDemo: [
					{
						id: 1,
						pid: 1,
						name: 'XS',
					},
					{
						id: 2,
						pid: 1,
						name: 'S',
					},
					{
						id: 3,
						pid: 1,
						name: 'M',
					},
					{
						id: 4,
						pid: 1,
						name: 'L',
					},
					{
						id: 5,
						pid: 1,
						name: 'XL',
					},
					{
						id: 6,
						pid: 1,
						name: 'XXL',
					},
					{
						id: 7,
						pid: 2,
						name: '白色',
					},
					{
						id: 8,
						pid: 2,
						name: '珊瑚粉',
					},
					{
						id: 9,
						pid: 2,
						name: '草木绿',
					},
				]
			}
		},
		onLoad(option) { 
			//option为object类型，会序列化上个页面传递的参数
			this.goodsId = option.goodsId
			this.getUser().then(info => {
				this.userInfo = info
				console.log('userInfouserInfo', info)
				this.getGoodsDetail()
			})
			console.log(this.goodsId)
		},
		methods: {
			previewProduct() {
				uni.previewImage({
					urls: [this.productInfo.productImage]
				});
			},
			buy() {
				// console.log('buy', this.specClass)
				this.toggleSpec()
				// uni.navigateTo({
				// 	url: '/pages/confirmOrder/confirmOrder?goodsId='+this.goodsId
				// });
			},
			getSpecProduct() {
				let products = JSON.parse(JSON.stringify(this.goodsInfo.products))
				this.specSelected.forEach(item => {
					let name = item.name
					products = products.filter(citem => {
						return citem.specifications.indexOf(name) != -1
					})
				})
				if (products.length == 0) {
					this.productInfo = null
				} else if (products.length == 1) {
					this.productInfo = products[0]
				} else {
					this.productInfo = productInfo[0]
				}
			},
			specFinish() {
				/// console.log('this.specSelected', this.specSelected, this.goodsInfo.products)
				const productInfo = this.productInfo
				if (productInfo == null || JSON.stringify(productInfo) === '{}') {
					this.$appFunc.msg('此规格商品已售完')
				}
				this.toggleSpec()
				uni.navigateTo({
					url: '/pages/confirmOrder/confirmOrder?goodsId='+this.goodsId+'&productId='+productInfo.id
				});
			},
			getUser() {
				return new Promise((resolve, reject) => {
					uni.getStorage({
						key: "userInfo",
						success: (res) => {
							let info = res.data;
							resolve(info)
						},
						fail: () => {
							this.$appFunc.msg('获取用户失败')
							reject(null)
						}
					})
				})
			},
			exchange() {
				this.specClass = 'show';
			},
			//规格弹窗开关
			toggleSpec() {
				console.log('specClass', this.specClass)
				if(this.specClass == 'show'){
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				}else if(this.specClass == 'none'){
					this.specClass = 'show';
				}
			},
			//选择规格
			selectSpec(index, pid){
				let list = this.specChildList;
				list.forEach(item=>{
					if(item.pid === pid){
						this.$set(item, 'selected', false);
					}
				})
			
				this.$set(list[index], 'selected', true);
				//存储已选择
				/**
				 * 修复选择规格存储错误
				 * 将这几行代码替换即可
				 * 选择的规格存放在specSelected中
				 */
				this.specSelected = []; 
				list.forEach(item=>{ 
					if(item.selected === true){ 
						this.specSelected.push(item); 
					} 
				})
				// 获取此规格商品
				this.getSpecProduct()
			},
			//收藏
			toFavorite(){
				this.favorite = !this.favorite;
			},
			stopPrevent(){},
			getGoodsDetail() {
				this.$request.get(this.$api.goodsDetail, {
					id: this.goodsId,
					userId: this.userInfo.id
				}).then(res => {
					uni.hideLoading()
					const { success, result } = res
					if (success) {
						result.detailFormat = result.detail.replace(/width="750"/g, 'width="100%"').replace(/<img /g,'<img style="display:block" ')
						result.products.forEach(item => { if (typeof item.specifications == 'string') item.specifications = JSON.parse(item.specifications)})
						this.goodsInfo = result
						if (result.gallery) {
							const arr = result.gallery.split(',')
							this.imgList = arr.map(item => {
								return {
									src: item
								}
							})
						} else {
							this.imgList = []
						}
						if (result.specifications) {
							const specifications = result.specifications
							const specificationsNames = []
							const specificationsList = []
							specifications.forEach(item => {
								let specificationsName = item.specificationsName
								let specificationsValue = item.specificationsValue
								let sindex = specificationsNames.indexOf(specificationsName)
								if (sindex == -1) {
									specificationsList.push({
										id: specificationsNames.length + 1,
										name: specificationsName,
										values: [specificationsValue]
									})
									specificationsNames.push(specificationsName)
								} else {
									specificationsList[sindex].values.push(specificationsValue)
								}
							})
							const products = result.products
							let specChildList = []
							specificationsList.forEach((item, index) => {
								let newSpecification = true
								item.values.forEach((citem, cindex) => {
									specChildList.push({
										id: index + '_' + cindex ,
										pid: item.id,
										name: citem,
										selected: newSpecification && cindex == 0
									})
									newSpecification = false
								})
							})
							this.specList = specificationsList
							this.specChildList = specChildList
							this.specSelected = [];
							specChildList.forEach(item=>{ 
								if(item.selected === true){ 
									this.specSelected.push(item); 
								} 
							})
							this.getSpecProduct()
							// specChildList: [
							// 	{
							// 		id: 1,
							// 		pid: 1,
							// 		name: 'XS',
							// 	},
							// 	{
							// 		id: 2,
							// 		pid: 1,
							// 		name: 'S',
							// 	},
							console.log('specList', specificationsList)
						}
					}else{
						this.$appFunc.msg('获取商品失败')
					}
				})
			}
		}
	}
</script>

<style lang='scss'>
	@import "@/style/variable.scss";
	.my-integral {
		@include myIntegral;
	}
	.carousel {
		height: 722rpx;
		position:relative;
		swiper{
			height: 100%;
		}
		.image-wrapper{
			width: 100%;
			height: 100%;
		}
		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		
	}
	
	/* 标题简介 */
	.introduce-section{
		background: #fff;
		padding: 20rpx 30rpx;
		margin-top: 16rpx;
		.title{
			font-size: 32rpx;
			color: $font-color-dark;
			height: 50rpx;
			line-height: 50rpx;
		}
		.price-box{
			display:flex;
			align-items:baseline;
			height: 64rpx;
			padding: 10rpx 0;
			font-size: 26rpx;
			color:$uni-color-primary;
			.goods-price {
				font-weight: bold;
				color: #398ade;
				text-align: right;
				display: flex;
				height: 60rpx;
				align-items: center;
				flex-direction: row;
				justify-content: flex-end;
				font-size: 50rpx;
				flex-grow: 0;
			}
			.goods-sale {
				flex-grow: 1;
				text-align: right;
				color: $font-color-light;
			}
			.goods-icon {
				width: 48rpx;
				height: 48rpx;
				margin-left: 12rpx;
			}
		}
		.price{
			font-size: $font-lg + 2rpx;
		}
		.m-price{
			margin:0 12rpx;
			color: $font-color-light;
			text-decoration: line-through;
		}
		.coupon-tip{
			align-items: center;
			padding: 4rpx 10rpx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6rpx;
			line-height: 1;
			transform: translateY(-4rpx); 
		}
		.bot-row{
			display:flex;
			align-items:center;
			height: 50rpx;
			font-size: $font-sm;
			color: $font-color-light;
			text{
				flex: 1;
			}
		}
	}
	
	/*  详情 */
	.detail-desc {
		background: #fff;
		margin-top: 16rpx;
		padding-bottom: 160rpx;
		.d-header{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			font-size: $font-base + 2rpx;
			color: $font-color-dark;
			position: relative;
				
			text{
				padding: 0 20rpx;
				background: #fff;
				position: relative;
				z-index: 1;
			}
			&:after{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300rpx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc; 
			}
		}
		image, img {
			display: block !important;
			width: 100% !important;
			height: auto !important;;
		}
	}
	
	/* 规格选择弹窗 */
	.attr-content{
		box-sizing: border-box;
		padding: 10rpx 30rpx;
		.a-t{
			display: flex;
			image{
				width: 170rpx;
				height: 170rpx;
				flex-shrink: 0;
				margin-top: -40rpx;
				border-radius: 8rpx;;
			}
			.right{
				display: flex;
				flex-direction: column;
				padding-left: 24rpx;
				font-size: $font-sm + 2rpx;
				color: $font-color-base;
				line-height: 42rpx;
				justify-content: center;
				.price{
					font-size: $font-lg;
					color: $uni-color-primary;
					margin-bottom: 10rpx;
				}
				.selected-text{
					margin-right: 10rpx;
				}
				.product-price {
					.goods-icon {
						width: 22rpx;
						height: 22rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
		.attr-list{
			display: flex;
			flex-direction: column;
			font-size: $font-base + 2rpx;
			color: $font-color-base;
			padding-top: 30rpx;
			padding-left: 10rpx;
		}
		.item-list{
			padding: 20rpx 0 0;
			display: flex;
			flex-wrap: wrap;
			text{
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 2rpx;
				min-width: 60rpx;
				height: 60rpx;
				padding: 0 20rpx;
				font-size: $font-base;
				color: $font-color-dark;
				border: 1px solid transparent;
				box-sizing: border-box;
			}
			.selected{
				background: #fff;
				color: $uni-color-primary;
				border: 1px solid #0157FA;
			}
		}
	}
	
	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}
		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10rpx 10rpx 0 0;
			background-color: #fff;
			.btn{
				height: 66rpx;
				line-height: 66rpx;
				border-radius: 100rpx;
				background: $uni-color-primary;
				font-size: $font-base + 2rpx;
				color: #fff;
				margin: 30rpx auto;
			}
		}
		@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}
			100% {
				transform: translateY(0%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(120%);
			}
		}
	}
	
	/* 底部操作菜单 */
	.page-bottom{
		position:fixed;
		left: 0rpx;
		bottom:0rpx;
		z-index: 95;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
		height: 130rpx;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		background: rgba(255,255,255,1);
		box-shadow: 0 0 10rpx 0 rgba(0,0,0,.3);
		border-radius: 0rpx;
		.goods-price {
			font-weight: bold;
			color: #398ade;
			text-align: right;
			display: flex;
			height: 60rpx;
			align-items: center;
			flex-direction: row;
			justify-content: flex-end;
			font-size: 50rpx;
			flex-grow: 0;
		}
		.goods-sale {
			flex-grow: 1;
			text-align: right;
			color: $font-color-light;
		}
		.goods-icon {
			width: 48rpx;
			height: 48rpx;
			margin-left: 12rpx;
		}
		.p-b-btn{
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96rpx;
			height: 80rpx;
			.yticon{
				font-size: 40rpx;
				line-height: 48rpx;
				color: $font-color-light;
			}
			&.active, &.active .yticon{
				color: $uni-color-primary;
			}
			.icon-fenxiang2{
				font-size: 42rpx;
				transform: translateY(-2rpx);
			}
			.icon-shoucang{
				font-size: 46rpx;
			}
		}
		.action-btn-group{
			display: flex;
			height: 76rpx;
			border-radius: 4rpx;
			overflow: hidden;
			box-shadow: 0 20rpx 40rpx -16rpx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: #3c9cff;
			margin-left: 20rpx;
			position:relative;
			&:after{
				content: '';
				position:absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28rpx;
				width: 0;
				border-right: 1px solid rgba(255,255,255,.5);
			}
			.action-btn{
				display:flex;
				align-items: center;
				justify-content: center;
				width: 180rpx;
				height: 100%;
				font-size: $font-base ;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}
	}
</style>
